<template>
  <div class="bigbox">
    <header><Userdata></Userdata></header>
    <main>
      <div class="left"><Orderdata></Orderdata></div>
      <div class="right">
        <AddUser></AddUser>
      </div>
    </main>
    <footer>
      <Mapdata></Mapdata>
    </footer>
  </div>
</template>

<script setup>
import Userdata from "../components/Userdata.vue";
import AddUser from "../components/AddUser.vue";
import Mapdata from "../components/Mapdata.vue";
import Orderdata from "../components/Orderdata.vue";
</script>

<style lang="less" scoped>
.bigbox {
  // background-color: #ebebeb;
  width: 100%;
  height: 100%;
  // overflow: scroll;
}
main {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;
  height: 400px;
  .left {
    background-color: white;
    width: 25%;
    border-radius: 20px;
  }
  .right {
    background-color: white;
    height: 100%;
    width: 74%;
    border-radius: 20px;
    .AddUser {
      width: 100%;
    }
  }
}

footer {
  div {
    margin-top: 20px;
    background-color: white;
    width: 100%;
    height: 600px;
    border-radius: 20px;
    padding-bottom: 20px;
  }
}
</style>
